<!--  -->
<template>
  <div class="goods-imgs" v-if="Object.keys(goodsDetail).length !==0">
    <div class="desc"> {{goodsDetail.desc}}</div>
    <div class="img-desc">{{goodsDetail.detailImage[0].key}}</div>
    <div class="img-list">
      <img 
        :src="item" alt="" 
        v-for="(item,index) in goodsDetail.detailImage[0].list" 
        :key="index"
        @imgLoad="imgLoad"
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsDetailInfo',
  props:{
    goodsDetail:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  data () {
    return {
      imgCount:0,
      imgLenght:0
    };
  },

  components: {},

  computed: {},

  methods: {
    imgLoad(){//增加这个方法，是滚动得时候，有时候图片还没加载完，scroll组件计算不到高度，造成滚动无效bug
      console.log('this.imgCount==',this.imgCount)
      if(++this.imgCount === this.imgLenght) {
        this.$emit("goodsImgLoad")
      }
    }
  },
  watch:{
    goodsDetail(){//增加则个方法，是为了防止每张图片加载，都去比对
      this.imgLenght = this.goodsDetail.detailImage[0].list.length
    }
  },


  created(){},
}

</script>
<style lang='scss' scoped>
.goods-imgs{
  
}
.img-desc{
  margin:15px 0;
  padding:20px;
}
</style>